<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div#search {
				width: 430px;
				margin: 0px auto;
				border: 1px solid red;
			}

			div#search img {
				vertical-align: middle;
			}

			div#search span {
				display: inline-block;
				border: 1px solid #2EA0F0;
				background-color: #2EA0F0;
				height: 25px;

			}

			div#search span input {
				height: 25px;
				width: 250px;
				border: none;
				outline: none;
			}

			div#search>input:first-of-type {
				margin-left: 90px;
			}
		</style>

		<script type="text/javascript">
			function change(o) { 
				var logo=document.getElementById("logo");
				var search = document.getElementById("keywords");
				var form=document.getElementById("searchForm");
				
				var s = o.value;
				if (s == "taobao") {
					search.setAttribute("name","q");
					logo.src = "images/taobao_shopping-446.png";
					form.action="https://s.taobao.com/search";
				} else if (s == "baidu") {
					search.setAttribute("name","wd");
					logo.src = "images/baidu_web.png";
					form.action="https://www.baidu.com/s";
				} else {
					search.setAttribute("name","q");
					logo.setAttribute("src","images/google_web-444.png");
					//logo.src = "images/google_web-444.png";
					form.action="http://www.google.cn/search";
				}
			}
 
		</script>
	</head>
	<body>
		<div id="search">
			 
			<img src="images/taobao_shopping-446.png" id="logo"/><span>
				<form name="form1" action="https://s.taobao.com/search" method="get" id="searchForm"/>
				<input type="text" id="keywords" value="" name="q"/>
				<input type="submit"  value="搜索" />
				</form>
			</span>
			<input type="radio" name="img" value="baidu" onclick="change(this)" />百度
			<input type="radio" name="img" value="google" onclick="change(this)" />谷歌
			<input type="radio" name="img" value="taobao" onclick="change(this)" checked="checked" />淘宝
		</div>
	</body>
</html>